<form *ngIf="modalVisible" nz-form [formGroup]="validateForm" (ngSubmit)="save()">
	<nz-modal [nzVisible]="modalVisible" [nzTitle]="l('CreateNewUser')" [nzConfirmLoading]="loading" [nzContent]="modalContent"
	 [nzFooter]="modalFooter" (nzOnCancel)="close($event)">
        <ng-template #modalContent>
            <nz-tabset>
                <nz-tab>
                    <ng-template #nzTabHeading>
                        用户信息
                    </ng-template>
                    <fieldset>
                        <div nz-form-item nz-row>
                            <div nz-form-label nz-col [nzSm]="4">
                                <label for="username" nz-form-item-required>{{l("UserName")}}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="getFormControl('username')">
                                <nz-input formControlName="username" [(ngModel)]="user.userName" nzPlaceHolder="输入大于等于2并小于等于32的字符" [nzId]="'username'"></nz-input>
                                <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('maxlength')">字符长度小于等于32</div>
                                <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('minlength')">字符长度大于等于2</div>
                                <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">请输入账户</div>
                            </div>
                        </div>
                        <div nz-form-item nz-row>
                            <div nz-form-label nz-col [nzSm]="4">
                                <label for="name" nz-form-item-required>{{l("Name")}}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="8" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
                                <nz-input formControlName="name" [(ngModel)]="user.name" nzPlaceHolder="请输入小于等于32的字符" [nzId]="'name'"></nz-input>
                                <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('maxlength')">字符长度小于等于32</div>
                                <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入姓</div>
                            </div>
                            <div nz-form-label nz-col [nzSm]="4">
                                <label for="surname" nz-form-item-required>{{l("Surname")}}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="8" nzHasFeedback [nzValidateStatus]="getFormControl('surname')">
                                <nz-input formControlName="surname" [(ngModel)]="user.surname" nzPlaceHolder="请输入小于等于32的字符" [nzId]="'surname'"></nz-input>
                                <div nz-form-explain *ngIf="getFormControl('surname').dirty&&getFormControl('surname').hasError('maxlength')">字符长度小于等于32</div>
                                <div nz-form-explain *ngIf="getFormControl('surname').dirty&&getFormControl('surname').hasError('required')">请输入名</div>
                            </div>
                        </div>
                        <div nz-form-item nz-row>
                            <div nz-form-label nz-col [nzSm]="4">
                                <label for="email" nz-form-item-required>{{l("EmailAddress")}}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
                                <nz-input formControlName="email" [(ngModel)]="user.emailAddress" [nzId]="'email'"></nz-input>
                                <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">邮箱地址无效</div>
                            </div>
                        </div>
                        <div nz-form-item nz-row>
                            <div nz-form-label nz-col [nzSm]="4">
                                <label for="password" nz-form-item-required>{{l("Password")}}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
                                <nz-input formControlName="password" [(ngModel)]="user.password" [nzType]="'password'" [nzId]="'password'"></nz-input>
                                <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入密码</div>
                            </div>
                        </div>
                        <div nz-form-item nz-row>
                            <div nz-form-label nz-col [nzSm]="4">
                                <label for="checkPassword" nz-form-item-required>{{l("ConfirmPassword")}}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
                                <nz-input formControlName="checkPassword" [(ngModel)]="user.confirmPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
                                <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请确认密码</div>
                                <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次输入的密码必须一致</div>
                            </div>
                        </div>
                        <div nz-form-item nz-row>
                            <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
                                <label nz-checkbox formControlName="isactive" [(ngModel)]="user.isActive">
                                    <span>{{l("IsActive")}}</span>
                                </label>
                            </div>
                        </div>
                    </fieldset>
                </nz-tab>
                <nz-tab>
                    <ng-template #nzTabHeading>
                        用户角色
                    </ng-template>
                    <nz-checkbox-group formControlName="rolegroup" [(ngModel)]="roleOptions"></nz-checkbox-group>
                </nz-tab>
            </nz-tabset>
        </ng-template>
        <ng-template #modalFooter>
            <button nz-button [nzType]="'default'" [nzSize]="'large'" type="button" (click)="close($event)">
                {{l("Cancel")}}
            </button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" type="submit" [nzLoading]="saving">
                {{l("Save")}}
            </button>
        </ng-template>
    </nz-modal>
</form>